<template>
    <div>
        <div id="data-table-box" style="display: none"></div>
        <v-data-table
                id="data-table"
                v-model="selected"
                :style="{width: $store.state.availableWidth}"
                mobile-breakpoint="10"
                hide-default-footer
                :headers="headers"
                show-select
                :items="list"
                :items-per-page="999"
                item-key="id"
                height="100%"
                fixed-header
                :search="search"
                no-results-text="未搜索到文件"
                no-data-text="您还没上传过文件哦"
        >
            <template v-slot:item.data-table-select="{ isSelected, select }">
                <v-simple-checkbox
                        color="green"
                        :value="isSelected"
                        @input="select($event)">
                </v-simple-checkbox>
            </template>
            <template v-slot:item.name="{ item }">
                <div @click="clickItem(item)" style="cursor:pointer; overflow: hidden">
                    <v-icon size="28px" class="mr-2" :color="getIconByType(item.type, item.name).color">
                        {{getIconByType(item.type, item.name).icon}}
                    </v-icon>
                    <a id="file-name">{{ item.name }}</a>
                </div>
            </template>
            <template v-slot:item.size="{ item }">
            <span>
                {{ formatSize(item.size) }}
            </span>
            </template>
        </v-data-table>
        <my-image-dialog :image="image" :image-dialog="imageDialog" @close="imageDialog = false"></my-image-dialog>
    </div>
</template>

<script>
    import {formatSize, getIconByType} from "../../../util";
    import MyImageDialog from "./MyImageDialog";
    import MyLoadingOverlay from "./MyLoadingOverlay";

    export default {
        name: "MyDataTable",
        components: {MyLoadingOverlay, MyImageDialog},
        props: {
            list: {
                type: Array,
                default: []
            },
            search: {
                type: String,
                default: ''
            },
            loadingOverlay: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                headers: [
                    {text: '文件名', value: 'name'},
                    {text: '大小', value: 'size', filterable: false},
                    {text: '修改日期', value: 'updateTime', filterable: false}
                ],
                imageDialog: false,
                image: {}
            }
        },
        methods: {
            getIconByType,
            formatSize,
            clickItem(item) {
                let _this = this;
                if (item.type === 'folder') {
                    // 点击文件夹
                    let path;
                    if (_this.path === undefined) {
                        path = "/disk/all?path=/" + item.name
                    } else if (_this.path === '/') {
                        path = "/disk/all?path=" + _this.path + item.name
                    } else {
                        path = "/disk/all?path=" + _this.path + "/" + item.name
                    }
                    _this.$router.push(path)
                } else if (/image/.test(item.type)) {
                    _this.image = item;
                    _this.imageDialog = true;
                } else {
                    let link = document.createElement("a");
                    link.target = "_blank";
                    link.href = "/preview?type=" + item.type + "&name=" + item.name + "&key=" + item.key;
                    let box = document.getElementById("data-table-box");
                    box.appendChild(link);
                    link.click();
                    box.removeChild(link);
                }
            }
        },
        computed: {
            selected: {
                get() {
                    return this.$store.state.selected;
                },
                set(value) {
                    this.$store.commit('setSelected', value)
                }
            },
            path() {
                return this.$route.query.path;
            }
        }
    }
</script>

<style scoped>
    #data-table {
        -moz-user-select:none;
        -webkit-user-select:none;
        -ms-user-select:none;
        -khtml-user-select:none;
        user-select:none;
        position: fixed;
        top: 150px;
        left: 195px;
        bottom: 0;
    }
    #file-name {
        color: rgb(33, 33, 33);
    }

    #file-name:hover {
        color: rgb(25, 118, 210);
    }

</style>